import React from 'react'
import styles from './App.module.css'
import {Row, Col} from 'antd'

export const Header:React.FC =() => {
    return (
      <div className={styles.one}>
         <div>共24的span,平均分配全部内容</div>
        <div>
          <Row >
            <Col className={styles.two} span={12}>col-12</Col>
            <Col className={styles.three} span={12}>col-12</Col>
          </Row>
          <br></br>
          <Row>
            <Col className={styles.two} span={8}>col-8</Col>
            <Col className={styles.three} span={8}>col-8</Col>
            <Col className={styles.two} span={8}>col-8</Col>
          </Row>
          <br></br>
          <Row>
            <Col className={styles.three} span={6}>col-6</Col>
            <Col className={styles.two} span={6}>col-6</Col>
            <Col className={styles.three} span={6}>col-6</Col>
            <Col className={styles.two} span={6}>col-6</Col>
          </Row>
          <br></br>

          <div>gutter控制间隔的大小，默认列水平间隔，也可以数组[水平间距, 垂直间距],或者在套个div，样式距离右即可有间隔</div>
          <Row gutter={2}>
            <Col span={6}>
              <div className={styles.gutter}>col-6</div>
            </Col>
            <Col span={6}>
              <div className={styles.gutter}>col-6</div>
            </Col>
            <Col span={6}>
              <div className={styles.gutter}>col-6</div>
            </Col>
            <Col span={6}>
              <div className={styles.gutter}>col-6</div>
            </Col>
          </Row>
          <br></br>

          <div>offset偏移量 这个量也是24，其实跟span本质是一样</div>
          <Row>
          <Col span={6} className={styles.three}>
              col-6 
            </Col>
            <Col span={6} className={styles.three}>
              col-6 
            </Col>
          </Row>
          <br></br>
          <Row>
            <Col span={6} offset={6} className={styles.three}>
              col-6 有offset，6
            </Col>
            <Col span={6} offset={6} className={styles.three}>
              col-6 有offset，6
            </Col>
          </Row>

          <div>xs,lg...xs,lg代表但到达多少px的时候用哪一个，且是组合的形式</div>
          <Row>
            <Col className={styles.four} xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
              Col
            </Col>
            <Col className={styles.three} xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>
              Col
            </Col>
            <Col className={styles.four} xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
              Col
            </Col>
          </Row>
        </div>
      </div>
    )
  }
